<template>
  <div class="bannerpage" v-if="homeBanner">
    <div class="top_box">
      <div class="logo">
        菜篮子
        <img src="../assets/img/菜.jpg" alt="" />
      </div>
      <div class="titles" v-if="banTitle">
        <p>{{ banTitle }}</p>
      </div>
      <div class="right_top">
        <!-- 首页 -->
        <router-link to="/home">
          <div class="home">
            <span class="iconfont icon-shouye-shouye"></span>首页
          </div>
        </router-link>
      </div>
    </div>

    <div class="banner_img" v-for="(item, index) in homeBanner" :key="index">
      <img :src="item" />
    </div>
  </div>
</template>
<script>
import { getContentJson } from "../api/home.js";

export default {
  data() {
    return {
      homeBanner: null,
      index: 0,
      banTitle: null,
    };
  },
  methods: {
    getContentJsonFun() {
      getContentJson().then((data) => {
        // this.homeBanner = data.homeBanner;
        let index = data.homeBanner.findIndex(
          (item) => item.banId == this.$route.query.id
        );
        // console.log(index);
        this.homeBanner = data.homeBanner[index].banPageImg;
        // console.log(this.homeBanner);

        this.banTitle = data.homeBanner[index].banTitle;
        // console.log(this.banTitle);
        // console.log(this.homeBanner[0].banPageImg);
      });
    },
  },
  created() {
    console.log(this.$route.query);
    if ("id" in this.$route.query) {
      this.getContentJsonFun();
    }
    // this.getContentJsonFun();
  },
};
</script>

<style lang="scss" scoped>
.bannerpage {
  .top_box {
    width: 100%;
    background-color: #ad0002;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: space-around;
    .titles {
      font-family: "font";
      font-size: 40px;
      font-weight: 600;
      /* background-color: #fff; */
      color: #fff;
      padding-top: 6px;
      letter-spacing: 16px;
    }
    .logo {
      font-family: "font";
      font-weight: 700;
      font-size: 65px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      img {
        position: absolute;
        top: 44px;
        right: 1px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }

    .right_top {
      display: flex;
      .home {
        color: #fff;
        font-size: 17px;
        padding-right: 70px;

        .icon-shouye-shouye {
          padding-right: 5px;
          font-size: 20px;
        }
      }
      .car {
        color: #fff;
        font-size: 17px;
        padding-right: 70px;

        .icon-gouwuche1 {
          padding-right: 5px;
          font-size: 20px;
          position: relative;
        }
        .car_num {
          position: absolute;
          top: -4px;
          right: -1px;
          width: 16px;
          border-radius: 50%;
          height: 16px;
          line-height: 17px;
          text-align: center;
          background: rgb(44, 199, 26);
          color: #fff;
          font-size: 12px;
          transform: scale(0.8);
        }
      }
    }
  }

  .banner_img {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      // height: 100%;
      display: block;
    }
  }
}
</style>